
// 创建一个 dom 节点，创建 一个 vNode
// 将vNode 挂在到 dom 上
// 将 dom 加到 body 上
import type { CreateMessageProps,MessageContext } from "./types"
import { h, render,ref } from "vue"
import MessageVnode from './Message.vue'
import { useZindex } from '@/hooks/useZIndex';

const {nextZindex} = useZindex(10)
// 组件项 数组
const instances:MessageContext[] = []
// 计数器 （也是每一个message 实例的编号）
const count = ref(1)
// 获取目前的最后一个 message 实例
export const getLastMessageInstance = ()=>{
  return instances.at(-1)
}

// 获取上一个组件的 bottomOffset
export const getLastBottomOffset = (id:number)=>{
  const index = instances.findIndex(instance=>instance.id === id)
  if(index === -1)return 0;
  const lastInstance = instances.at(index)
  const ret = lastInstance!.vnode.component!.exposed!.bottomOffset.value
  // console.log('上一个的bottomoffset：',ret)
  return ret
}

// 创建 Message 的工厂函数 （利用闭包）
export const createMessage = (props:CreateMessageProps)=>{
  const id = count.value++// 分配各自的 id
  // 消除属性的方法
  const destroy = ()=>{
    render(null,container)
    // 还要删除 数组里的实例
    const index = instances.findIndex((instance)=>{
      return instance.id === id
    })
    if(index === -1)return
    instances.splice(index,1)
    console.log('last_Message:',getLastMessageInstance())
  }

  // 手动删除组件的方法
  const manualDelete = ()=>{
    const index = instances.findIndex(instance => instance.id === id)
    if(index === -1)return
    const instance = instances[index]
    instance.vnode.component!.exposed!.visible.value = false
  }

  // 重组 props
  const newProps = {
    ...props,
    id,
    onDestroy:destroy,
    zIndex:nextZindex(),
  }

  const container = document.createElement('div')
  // 创建一个组件
  const vNode = h(MessageVnode,newProps)
  
  render(vNode,container)
  // 脱掉一层壳div，然后挂在到 body 上
  document.body.append(container.firstElementChild!)

  // 将新生成的 message 组件 加入实例数组
  // id:string,
  // vnode:VNode,
  // props:MessageProps;
  const instance = {
    id,// message 组件编号
    vnode:vNode,// message 组件节点
    props:newProps,
    manualDelete,
  }
  instances.push(instance)

  // 向外界返回 一个组件实例
  // 形成了闭包
  return instance
}

